<template>
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
          v-for="(item,index) in breadList"
          :key="index"
          :to="{ path: item.path }"
        >{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="handle-box">
          <el-select v-model="query.state" placeholder="订单状态" class="handle-select mr10">
            <el-option key="0" label="已删除" value="0"></el-option>
            <el-option key="1" label="创建" value="1"></el-option>
          </el-select>
          <el-input v-model="query.userId" placeholder="评论人Id" class="handle-input mr10"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
        <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
          <el-table-column prop="commentId" label="ID" width="55" align="center"></el-table-column>
          <el-table-column prop="user.username" label="评论人" width="80"></el-table-column>
          <el-table-column prop="article.articleName" label="评论文章标题"></el-table-column>
          <el-table-column label="评论状态" width="100" align="center">
            <!-- 获取http://localhost:3000/comment/getAllCommentByPage中的数据 -->
            <template #default="scope">
              <el-tag :state="scope.row.state == '0'
                  ? 'danger': 'success'
                ">
                {{
                  scope.row.state == '0'
                  ? '已删除':  '创建'
                }}
              </el-tag>
            </template>
          </el-table-column>
           <el-table-column prop="content" label="内容"></el-table-column>
          <el-table-column prop="updatedAt" label="评论时间"></el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
              <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-popconfirm title="确定要删除此订单" confirm-button-text="确定" cancel-button-text="取消"
                @confirm="handleDelete(scope.$index, scope.row)">
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-if="totalCount" v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize"
            layout="prev, pager, next, jumper" :total="totalCount" @current-change="handleCurrentChange" />
        </div>
      </div>
      <el-dialog v-model="centerDialogVisible" title="评论编辑" width="40%">
        <div>
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
            <el-form-item label="评论人" prop="userId">
                  <el-select v-model="ruleForm.userId" filterable placeholder="请选择评论人">
                    <el-option
                    v-for="item in use" :key="item.userId" :label="item.username" :value="item.userId">
                    </el-option>
                  </el-select>
                </el-form-item>
            <el-form-item label="订单状态" prop="state">
            <el-radio-group v-model="ruleForm.state">
              <el-radio :label="0">删除</el-radio>
              <el-radio :label="1">已创建</el-radio>
            </el-radio-group>
          </el-form-item> 
                <el-form-item label="评论文章" prop="articleId">
                  <el-select v-model="ruleForm.articleId" filterable placeholder="请选择评论的文章标题">
                    <el-option 
                    v-for="item in art" :key="item.articleId" :label="item.articleName" :value="item.articleId">
                  </el-option>
                  </el-select>
                </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input v-model="ruleForm.content" />
            </el-form-item>
            <!-- <el-form-item label="评论时间" prop="updatedAt">
            <el-date-picker v-model="ruleForm.updatedAt" type="updatedAt" placeholder="选择评论时间">
            </el-date-picker>
          </el-form-item> -->
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="submitForm(ruleFormRef)">更新</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
            <el-button @click="centerDialogVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  <script>
  import { useRouter, useRoute } from 'vue-router'
  import { ref, reactive, watch } from "vue";
  import request from "../../utils/request";
  import { ElNotification } from "element-plus";
  export default {
    setup() {
      let breadList = [] // 路由集合
      let use=ref([])//评论人集合
      let art=ref([])//文章标题集合
      const route = useRoute()
      const getBreadcrumb=(url)=> {
        let matched = url.matched;
        //如果不是首页
        if ("Home"==matched[0].name) {
          matched[0].meta =  { title: "系统首页" } 
        }
        breadList = matched;
      }
      watch(route, (newValue, oldValue) => {
        // console.log(222222,newValue)
        getBreadcrumb(newValue)
      },{ deep: true, immediate: true });
      
      const resetForm = (formEl) => {
        if (!formEl) return;
        formEl.resetFields();
      };
      const submitForm = async (formEl) => {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            // console.log("提交更新", fields);
            request
              .request({
                url: "/comment/update",
                method: "post",
                data: {
                 commentId: ruleForm.commentId,
                  userId: ruleForm.userId,
                  content: ruleForm.content,
                  articleId: ruleForm.articleId,
                  state: ruleForm.state
                },
              })
              .then((res) => {
                if (res.data.code == 200) {
                  ElNotification({
                    title: "更新成功",
                    message: "成功更新订单信息",
                  });
                  // 关闭弹窗
                  centerDialogVisible.value=false
                  //刷新
                  getData();
                } else {
                  ElNotification({
                    title: "更新失败",
                    message: "请联系管理员检查失败原因",
                  });
                }
              })
              .catch((e) => {
                ElNotification({
                  title: "更新失败",
                  message: "请联系管理员检查失败原因",
                });
              });
          } else {
            ElNotification({
              title: "校验失败",
              message: "请重新填写信息",
            });
          }
        });
      };
      const ruleForm = reactive({
        commentId: "",
        userId: "",
        content:"",
        articleId: "",
        state: 1
      });
      const rules = reactive({
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: "blur",
          },
        ],
        tystatepe: [
          {
            required: true,
            message: "请选择订单状态",
            trigger: "change",
          },
        ],
      
      });
      const ruleFormRef = ref();
      const centerDialogVisible = ref(false);
      const query = reactive({
        userId: "",
        currentPage: 1,
        pageSize: 5,
      });
      const tableData = ref([]);
      const totalCount = ref(0);
      // 获取表格数据
      const getData = () => {
        request
          .request({
            url: "/comment/getAllCommentByPage",
            params: {
              userId:query.userId,
              state: query.state,
              currentPage: query.currentPage,
              pageSize: query.pageSize,
            },
            method: "get",
          })
          .then((res) => {
            //获取当前页的数据
            const rows = res.data.data.rows;
            // 遍历修改时间格式
            for (const row of rows) {
              row.updatedAt = formatTime(row.createdAt);
            }
            //获取当前页的数据
            tableData.value = res.data.data.rows;
            //获取总记录数
            totalCount.value = res.data.data.count;
          })
          .catch((e) => {
            console.log(e);
          });
      };
      // 格式化时间函数
      const formatTime = (time) => {
        const date = new Date(time);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date.getDate().toString().padStart(2, "0");
        const hours = date.getHours().toString().padStart(2, "0");
        const minutes = date.getMinutes().toString().padStart(2, "0");
        const seconds = date.getSeconds().toString().padStart(2, "0");

        return `${year}/${month}/${day}/${hours}:${minutes}:${seconds}`;
      };
      getData();
      // 查询操作
      const handleSearch = () => {
        getData();
      };
      // 分页导航
      const handleCurrentChange = (val) => {
        query.currentPage = val;
        getData();
        // console.log(val);
      };
      // 删除操作
      const handleDelete = (index, row) => {
        request
          .request({
            url: "/comment/delete",
            method: "get",
            params: {
              commentId: row.commentId,
            },
          })
          .then((res) => {
            if (res.data.msg == "success") {
              getData();
              ElNotification({
                title: "删除成功",
                message: "成功删除订单信息",
              });
            } else {
              ElNotification({
                title: "删除失败",
                message: "请联系管理员检查失败原因",
              });
            }
          })
          .catch((e) => {
            ElNotification({
              title: "删除失败",
              message: "请联系管理员检查失败原因",
            });
          });
      };
      const getUsername=()=>{
            request.request({
              url:"/user/getAllUsers",
              method:'get',
            }).then((res)=>{
              //获取当页数据
              use.value=res.data.data
      console.log(JSON.stringify(use)+"所有用户");
            }).catch((e)=>{
              console.log(e);
            })
          };
          getUsername();
          const getArticleName=()=>{
            request.request(
              {
                url:'/article/getAllArticle',
                method:'get'
              }
            ).then((res)=>{
              art.value=res.data.data
              console.log(JSON.stringify(use)+'所有用户');
            }).catch((e)=>{
              console.log(e);
            })
          }
          getArticleName();
          const handleEdit = (index, row) => {
        centerDialogVisible.value = true;
        ruleForm.commentId = row.commentId;
        ruleForm.userId = row.user.userId;
        ruleForm.state = row.state;
        ruleForm.articleId = row.articleId;
        ruleForm.content=row.content;
      };
      return {
        breadList,
        resetForm,
        ruleFormRef,
        submitForm,
        ruleForm,
        rules,
        centerDialogVisible,
        query,
        totalCount,
        tableData,
        getData,
        handleEdit,
        handleSearch,
        handleCurrentChange,
        handleDelete,
        getArticleName,
        getUsername,
        use,
        art,
      };
    },
  };
  </script>
  <style lang="scss" scoped>
  .handle-box {
    margin-bottom: 20px;
  }
  
  .handle-select {
    width: 120px;
  }
  
  .handle-input {
    width: 300px;
    display: inline-block;
  }
  
  .table {
    width: 100%;
    font-size: 14px;
  }
  
  .red {
    color: #ff0000;
  }
  
  .mr10 {
    margin-right: 10px;
  }
  
  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
  </style>
  